<template>
  <div class="login">
    <div class="login__background"></div>
    <van-cell-group inset>
      <van-form @submit="onSubmit" style="width: 100%">
        <!-- <van-field
          v-model="loginForm.tenantId"
          name="tenantId"
          label=""
          placeholder="请输入租户号"
          type="digit"
          :rules="[{ required: true, message: '请输入租户号' }]"
        /> -->
        <van-field
          v-model="loginForm.username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' }]"
        />

        <van-field
          v-model="loginForm.password"
          name="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />

        <van-field
          v-model="loginForm.code"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <template #button>
            <img :src="imgSrc" class="login-code-img" @click="refreshCode" />
          </template>
        </van-field>

        <div style="margin-top: 26px">
          <van-button round block type="primary" native-type="submit"> 登录 </van-button>
        </div>
      </van-form>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import type { LoginParams } from '/@/model/user/userModel';

import { getCaptcha as getCaptchaApi } from '/@/api/system/user';
import { reactive, onMounted, ref } from 'vue';
import { useUserStore } from "/@/store/user";
import md5 from 'js-md5';

// 验证码
const imgSrc = ref('');
const refreshCode = () => {
  getCaptchaApi().then((res) => {
    const { image, key } = res.data;
    imgSrc.value = image;
    loginForm.key = key;
  });
};
onMounted(() => {
  refreshCode();
  // console.log(userStore.$state.token, useUserStore().$state.token)
});

const userStore = useUserStore()
const loginForm = reactive<LoginParams>({
  tenantId: '000000',
  username: '',
  password: '',
  code: '',
  key: ''
});
const onSubmit = () => {
  // loginApi(loginForm);
  userStore.login({
    ...loginForm,
    password: md5(loginForm.password)
  }).then(res => {
    // console.log(userStore.$state, 'after')
  })
};
</script>

<style scoped lang="less">
.login {
  &__background {
    width: 750px;
    min-height: 764px;
    background-image: url(/@/assets/image/login/background.png);
    background-size: 750px 764px;
  }

  &-code-img {
    width: 180px;
  }
}
</style>
